<script setup>
import {ref} from 'vue'
import { useRouter } from "vue-router";
const router = useRouter()
const LoginSuccess = ()=>{
  router.push('/')
}
const isLogin = ref(false)
const goRegister = ()=>{
  isLogin.value = true 
}
const returnLogin = ()=>{
  isLogin.value = false
}
</script>
<template>
  <div class="login-container">
    <!-- <button @click="LoginSuccess" class="btn">vgvghhg</button> -->
    <div class="form-container" v-if="!isLogin">
      <form class="form">
        <p class="heading">Login</p>
        <input class="input" placeholder="请输入用户名(学号)" type="text">
        <input class="input" placeholder="请输入密码" type="text"> 
        <div class="btn-container">
          <button class="btn" @click="LoginSuccess">登录</button>
          <button class="btn" @click="goRegister">注册</button>
        </div>
      </form>
    </div>
    <div class="form-container" v-if="isLogin">
      <form class="form">
        <p class="heading">register</p>
        <input class="input" placeholder="请输入用户名(学号)" type="text">
        <input class="input" placeholder="请输入密码" type="text"> 
        <div class="btn-container">
          <button class="btn" @click="LoginSuccess">注册</button>
          <button class="btn" @click="returnLogin">返回</button>
        </div>
      </form>
    </div>
  </div>
</template>
<style lang="less" scoped>
.login-container{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 712px;
  background: linear-gradient(
    45deg,
    #3498db,
    #2ecc71
  ); /* Gradient background */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for depth */
  border-radius: 0px; /* Rounded corners */
  position: relative;
  overflow: hidden;
  &::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     background-image: linear-gradient(
         90deg,
         rgba(255, 255, 255, 0.1) 1px,
         transparent 1px
       ),
       linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
     background-size: 20px 20px;
     pointer-events: none; /* Allow clicking through the pattern layer */
  }
}
.form-container{
 position: absolute;
 top: 200px;
 left: 520px;
  height: 100px;
  width: 100px;
  .form {
    height: 200px;
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    background-color: white;
    padding: 2.5em;
    border-radius: 25px;
    transition: .4s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.4) 1px 2px 2px;
}

.form:hover {
  transform: translateX(-0.5em) translateY(-0.5em);
  border: 1px solid #171717;
  box-shadow: 10px 10px 0px #666666;
}

.heading {
  color: black;
  padding-bottom: 2em;
  text-align: center;
  font-weight: bold;
}

.input {
  width: 200px;
  border-radius: 5px;
  border: 1px solid whitesmoke;
  background-color: whitesmoke;
  outline: none;
  padding: 0.7em;
  transition: .4s ease-in-out;
}

.input:hover {
  box-shadow: 6px 6px 0px #969696,
             -3px -3px 10px #ffffff;
}

.input:focus {
  background: #ffffff;
  box-shadow: inset 2px 5px 10px rgba(0,0,0,0.3);
}

.form .btn {
  margin-top: 2em;
  align-self: center;
  padding: 0.7em;
  padding-left: 1em;
  padding-right: 1em;
  border-radius: 10px;
  border: none;
  color: black;
  // transition: .4s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px;
}

.form .btn:hover {
  box-shadow: 6px 6px 0px #969696,
             -3px -3px 10px #ffffff;
  transform: translateX(-0.5em) translateY(-0.5em);
}

.form .btn:active {
  transition: .2s;
  transform: translateX(0em) translateY(0em);
  box-shadow: none;
}
.btn{
  margin-right: 20px;
}
}
.btn {
  margin-top: 2em;
  align-self: center;
  padding: 0.7em;
  padding-left: 1em;
  padding-right: 1em;
  border-radius: 10px;
  border: none;
  color: black;
  transition: .4s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 1px;
}

.btn:hover {
  box-shadow: 6px 6px 0px #969696,
             -3px -3px 10px #ffffff;
  transform: translateX(-0.5em) translateY(-0.5em);
}

.btn:active {
  transition: .2s;
  transform: translateX(0em) translateY(0em);
  box-shadow: none;
}
.btn{
  margin-right: 20px;
}
</style>